以房产业务为例分享SaaS业务设计心路

SaaS业务设计本质上属于B端产品设计， 但是房企业务因行业属性的独特性也带来了设计层面的差异性。笔者将自己在房产业务的设计心路分享跟大家，一方面希望帮助大家一定程度上了解面向大型B端地产客户的SaaS业务，另一方面也希望从“设计支撑”及“设计赋能”2个维度为大家带来新鲜的视角。

房产业务介绍

房产消费市场存在两类重要角色，一类是供给侧的「房产」，另一种是需求侧的「消费者」。供应侧在拿地后，通常需要设计、成本、营销等多角色的介入，基于一定的装修标准完成建筑设计、户型设计，产出室内精装设计方案。精装方案的产出物之一”室内效果图“会作为新房营销的物料，组合以其他卖点，被营销部门用于新房营销宣传，以吸引消费者购买。在交房前半年-1年的时间内，物业（房产旗下或合作物业）与装修装饰公司合作，为业主提供部分定制化的硬装装修、软装购买等服务，定制装修内容随精装房交付时一起交付。

   图1  房产供给与消费链路

房产的业务正是贯穿了【精装设计】【新房营销】【物业美居】三条链路，拉通成本、招采、设计、营销、成本等多角色的一体化设计方案。房产业务本身涉及角色多，链路也相当复杂，上述内容只是对目前房产业务涉及的内容进行简单概括，以帮助大家对业务形成基本的认知。

介绍迭代思路

业务从零开始时，往往不会直接进入产品开发，而是基于初版的解决方案去验证市场，拿下标杆客户。基于标杆客户的背书，将解决方案售卖给更多客户。触达和签约客户数量增加后，业务侧可收集更多的反馈，对行业的认知也更加深入，此时可提炼通用的业务诉求，沉淀标准化的产品和能力。并且不断完善和打磨产品，最终将其售卖给更多的客户。

      图2  业务迭代思路

对于创新业务而言，打造让客户满意的解决方案、开拓市场是重中之重。而对设计而言，助力解决方案的售卖和标准化产品的打造是设计赋能创新性业务的核心切入点。因此，设计侧经过系统的思考和规划，推动了房企视觉升级、规范库建设等设计实践内容来助力房企业务的发展。

「Chapter One」

洞见问题-推动房企视觉升级

(一) 背景

设计侧运用问卷调研、访谈、设计洞察等，梳理房企业务在现阶段存在的问题，主要聚焦在5个方面。

1. 视觉风格：统一性与美观性不足，无法体现“房产”特性。
2. 内容传达：宣传物料上的内容无法有效传达房产业务核心价值。
3. 营销渠道：尤其线上营销渠道薄弱，主站-房企页面访问量极低。
4. 宣传能力：营销物料缺乏，且已有物料无法更好的曝光品牌和业务价值。
5. 定制化需求：房产客户存在符合自己品牌调性的定制化视觉诉求。

加之房企业务的快速发展，初步形成了房企链路下相对成熟和完整的产品体系，对外营销的需求越来越强烈，亟需对房企业务进行统一的视觉升级，助力业务明确自身定位，树立品牌形象，增强对外营销和推广能力。

 图3 项目背景

(二) 目标与设计规划

经过设计调研、业务方反馈及设计内部研讨（ux&ui&创意视觉共创），明确当前主要三个核心目标：

1. 探索视觉风格：形成符合房产特性的视觉风格，以指引后续一系列的品牌设计。
2. 品牌形象与认知：明确房产定位，树立高端的品牌形象，从视觉表现层面引导获得客户的认同。
3. 客户触达与转化：强化营销渠道和宣传推广能力，助力业务触达客户，促进商机转化。

在具体规划层面，选取【产品侧】和【营销推广侧】作为核心切入方向，不同角色的设计师分工协作，制定详细的设计任务并推动业务侧一起完成。

1. 产品侧：重点在于开发通用化的配置能力满足客户的定制化需求，包含主题风格、主题颜色、导航配置、菜单文案配置等，按钮的配置等。
2. 营销推广侧：重点在房企VI系统建设、宣传能力升级、营销渠道优化，期望从传播内容-传播介质-传播渠道等方面进行全方位的升级。

    图4  目标与规划

(三) 视觉升级内容产出

a.助力业务明确自身定位

通过问卷的方式对20+的房产运营、销售、售前、产品、解决方案等角色进行调研，并且联系关键角色进行头脑风暴，明确房产业务名称、定位、slogan和关键词，在后续的销售和运营推广环节中统一运用，并为房产视觉升级项目的开展提供方向指引。

 图5 助力业务明确自身定位

b.探索视觉风格，提供主题定制化能力

房产业务由于自身的行业属性，导致大众化的B端产品设计风格很难戳中客户的内心，需要进一步调研房产行业特征，并总结出属于房产的视觉风格。经过设计调研，以及签单过程中客户的进一步反馈，可以总结出房企在设计层面需尽可能体现出“高端大气”“科技感”的特征。高大上的设计风格不仅会增加消费者的吸引力，更是地产硬实力的表现。

   图6  探索视觉风格特征

在界面的视觉表现层面，客户也明确提出不要过于枯燥，要贴近房产行业的要求。在对20+的地产门户网站，以及地产内部系统调研和分析后发现，地产内部系统多通过改变背景透明度、背景渐变色等形式来体现地产的视觉风格。如果采用类似的方式，一方面会由于改造组件而带来极高的技术成本；另一方面此种设计的定制性过强，无法形成通用的产品能力。经过设计、技术、业务侧的多方交流，最终决定通过【多风格+多主题】的形式实现”科技感“的视觉表现，产出对应的demo稿给到客户确认并且顺利通过。

在售卖解决方案时，往往需要销售、售前进行POC演示，此时可提前从标准颜色（涵盖各大地产品牌色）、标准风格中进行设置，让客户无意识的感知到系统好像是为自己量身定制，加深客户印象。设计师也可根据确定的品牌色梳理颜色值，对应颜色变量名称填入到后台管理系统中，无需发版即可同步更新到线上。自动化配置的能力更好的满足产品需要嵌入到客户内部系统中的使用场景。

 图7  以上截图为过程稿，仅做示意

c.输出房企物料，统一视觉风格，赋能谈单与营销推广

明确视觉风格，输出房企物料。包括产出精装系统logo，用于各项物料宣传；推动业务侧提供最新的解决方案，完成标准化的宣传手册、手提袋、宣传视频设计，复用到多次线下活动中；提供符合地产视觉风格的PPT模板，按照内容分类产出对应的PPT模板页面，例如需求分析、功能对比、价值传达等，供业务方快速复用，提升制作PPT的效率。以下为部分物料展示：

 图8  房企VI系统-logo设计提案

 图9  房企VI系统-宣传手册

   图10  房企VI系统-宣传手册&包装袋实体

d.线上营销渠道入口及内容优化

酷家乐主站中房企入口较深，导致业务的曝光量少，点击量非常低。了解到问题后，设计协同市场同学完成入口前置动作，在一级解决方案的浮层面板中透出房产精装和美居解决方案，并且对解决方案的承接页面从内容到表现层面进行重构，优化后的PV数据也得到极大的提升。

图11  主站入口调整与解决方案落地页重构

除上述内容外，设计侧还对核心链路页面进行统一的视觉升级优化，实现从品牌层面到具体界面表现层面均能传达出业务的视觉特征，保证用户心智的统一。

「Chapter Two」

系统思考-全方位的设计支撑策略

在日常工作中，设计不只是被动的承担”需求设计“的角色，更需要对业务从销售谈单到交付实施的全链路进行系统分析。上述的视觉升级项目中对营销物料的打造和营销渠道的优化，可以助力业务增加曝光量，获取更多商机线索。那在商机进入后，设计侧又可以找到哪些发力点来支撑业务呢？让我们来一起看看。

商机—签约—交付实施是谈单到交付客户的必经阶段，每个阶段设计可以找到不同的发力点来支撑和赋能业务。

  图12  设计支撑策略

Step1: 商机阶段

通常需要通过多次上会汇报，展示解决方案的价值。而当业务处于0-1阶段时，尚未形成成熟的产品，解决方案PPT或产品原型成为业务与客户谈单时的核心抓手。设计师需要主动走近客户，为业务排忧解难，产出汇报所需的各项物料，助力业务谈单，包括但不限于「全链路demo页面」「可交互式原型」「核心场景GIF图」「演示环境」「其他所需的配图等等」。

   图13  核心场景演示gif动图

商机阶段的核心目标是助力业务进行客户侧的汇报，需要即时响应汇报过程中的各种需求。举个例子，在金茂客户谈单过程中，客户需要的是从精装-美居全链路的解决方案，即两个平台相整合，并且希望平台界面表现更偏向金茂自身的风格。彼时精装和美居还是相互独立的两个平台，也未增加主题定制化能力。设计了解具体需求后，提出在精装平台增加物业美居入口的方案并且与业务侧对齐，拉通精装、美居两条业务线开发在精装演示环境搭建完成，并且协同技术通过组件自带的主题能力暂时调整当前界面的展示效果使其符合客户预期，最终顺利通过演示。

 图14  设计助力业务侧演示

Step2: 签约阶段

成功签约后，尤其是对公司具有战略意义的项目，客户会举办对公司内或对外的发布会，展示项目成果，树立行业影响力。此阶段通常由创意视觉、UI设计师主导，需要配合市场同学产出客户举办发布会所需的各种物料。通常为客户专属的定制化物料，包括但不限于主视觉、发布会PPT、发布会视频所需的宣传图、预热海报、邀请函、手提袋、签名墙等等。（涉及客户暂不展示）

Step3: 交付实施阶段

客户签约后，会设置关键的里程碑节点，对应节点需要产出对应的交付物。产品、设计、研发、测试、实施等人员需要全力配合，保证对应节点的汇报演示顺利通过。

a.设计流程

首先来看设计流程，进入到交付实施阶段，即进入到正式的产研流程。相比日常产品迭代流程，交付类项目的产研流程中一定要增加【客户确认】环节，在这个环节中，设计师对整个项目的推动起到核心作用。设计师需要将产品需求方案转化为落地研发的设计稿，并且需要梳理出可用于产品核心链路的演示demo，用于客户进行最终确认。此时，客户会针对设计稿界面布局、主题色彩、信息传达等方面提出自身的建议，设计师接收建议后，需要对设计稿进行优化并且二次汇报，确认客户满意后方可进入下一环节。

增加客户确认环节后，相比之前标准的产品迭代，迭代节奏必然会受到影响。此时项目经理和产品经理等关键角色需要做好对客户侧的预期管理、对内的敏捷迭代节奏管理，才可以保证产品资源在有效的时间内得到最大化的利用。

  图15  产研流程增加客户确认环节

b.标品打造

在经过标杆项目打造，以及签单过程中与多个客户的沟通跟进，我们对于房产行业的了解越来越深入，对客户需求的了解也越来越充分，是时候进行标准化产品的建设来满足绝大部分客户的需求。与此同时，随着业务扩大，设计与研发人员也在增加，设计内部及设计与研发之间也出现了协作流程上的问题。可以总结概括为以下两个方面：

1. 质量问题： 需求量大时间紧的情况下，设计师无法进行及时的设计内审，在多人协作时容易出现设计方案不统一等问题。
2. 低效问题：缺乏统一的指导，对于不清楚的场景需要与新人设计师进行多次沟通，沟通成本高；设计开发协作效率低，设计师需要对同样场景的设计规范进行重复撰写，开发在不同功能模块的开发过程中也会反复询问同样的问题，增加了开发、设计沟通成本；不同场景下存在可复用的组件，但缺少沉淀，导致无可复用的组件，影响开发效率。

为了解决上述问题，UX UI 协作整理房企的设计系统，并且联手开发搭建房企业务组件，旨在：

1. 提升平台设计质量，解决统一性问题，并且基于业务目标、用户调研等，明确平台设计原则，使其符合行业规范和用户需求。
2. 通过统一的设计规范、业务组件建设，提升设计和研发效率。
3. 建立标准化的协作流程，提升多角色协作效率，减少无效沟通。

图16  问题与解决方案

b.1 系统构成

整个设计系统包括设计原则制定、图标规范、色彩规范、设计规范、流程规范等，期望能够提供全面的设计指导，减少从需求-设计-研发-验收等各环节中可能出现的问题，具体内容大家可以查看下图。

     图17  设计系统构成

下面简要说明设计原则与设计规范（模式）的制定。

b.2 设计原则制定

• 有据可循：

虽然B端产品有着通用的设计原则，但是具体到某一业务的原则，业务的定位、目标，行业属性，客户的要求，目标用户的行为习惯等要素都会影响设计原则的制定。因此需要对业务进行分析、对用户进行调研后去得出指导原则。以房企为例，其涉及到多个端，多个角色，多个功能模块，用户的操作链路相对比较复杂；加之与客户的沟通，对用户的目标、行为也有了更加明确的感知，因此梳理出房产业务的设计原则，并且运用在日常的设计当中。

• 切忌模糊，可行性强：

对于设计原则的定义一定要清晰明确，并且在团队内部达成一致，确保设计师看到原则知道如何设计产品，可以辅助具体的案例加以说明。例如房企设计原则中的“直观性”原则，是通过跟客户汇报设计稿时，客户明确反馈出来的建议。对于“直观性”的解读为：图文并茂，增强可读性；降低页面信息密度；不可过度追求高效导致用户在任务流程中感到困惑。它既影响界面布局，又影响到流程层面，需要设计师在设计时充分考虑这两个方面。

 图18  房企设计原则

b.3 设计规范（模式）

设计模式指的是可以解决同一类设计问题的通用性的解决方案，比如“搜索模式”，”批量选择“等，关于设计模式的解读大家感兴趣的话可以去查看《Design System》相关的文章。

• 基于对业务的分析产出模式/组件

设计师将需求转化为设计稿时离不开对业务本身的分析，因此我们会发现不同的业务场景下设计师采取了同样的设计方案。举个例子，房企业务下用户通常比较关注”项目、分期、楼栋、户型面积“等字段，这些字段几乎横亘了房企”方案管理、户型管理“等多个场景下，但是不同角色用户关注的字段又存在差异性。因此在卡片组件设计时，组件上面的字段数量及名称定义为可灵活配置的，不用场景下只需要显示不同的字段就可以实现组件通用性的应用。

• 设计模式/组件并非一成不变

值得说明的是设计模式并非一成不变，会随着产品迭代而不断更新。设计系统中需包含对模式/组件的构建与使用机制，保证模式/组件可以持续迭代和维护。

图19 定义/产出模式和组件

总结

面向大B客户的SAAS业务，通常需要从标杆项目切入市场，逐渐在行业内树立品牌影响力，进而渗透更多大型客户。需要时刻保持标准化思维，拓展标准化的产品能力，逐步赋能到整个行业。

走近客户，总结业务特征，转化为设计

设计师需要抓住一切机会走近客户，深入了解行业与业务。基于对业务和用户的分析，为设计方案的产出提供有力支撑。对于SAAS业务，大客户中决策人员的话语权重，是决定是否买单的关键角色。设计时需要充分考虑决策人员的建议，并与产品通用能力相结合。比如决策人员均觉得系统应该符合自身的品牌调性，那么不同公司的品牌调性又存在差异性，这时是否可以考虑通用的品牌定制化能力来解决客户的定制化诉求。

洞见问题，系统化的解决问题

具备洞见问题和系统化解决问题的能力。如果只是点对点的解决问题，会发现解决一个问题后其他问题此起彼伏的出现。因此需要学会定义本质问题，并且系统化的进行解决。比如系统性的梳理问题，搭建设计系统，面面俱到的解决日常设计以及与研发人员之前协作时出现的各种问题，让设计有据可循的同时提升产研效率；对房企整体进行系统化的视觉升级，助力业务签单的同时树立品牌影响力。在0-1的创新业务中，洞见问题和系统化解决问题的能力，更有助于设计师充分发挥自身价值，实现业务发展与个人提升的双向促进。

作者：瑶一、噪雾、巫堵 

鸣谢：禾苗

更多内容请关注公众号「群核科技用户体验设计」，一起交流讨论设计~

---

往期热文精选

【特别推荐】

【视觉类：UI/创意】

【交互类】

【用研类】